<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Class/Class.Binds</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Class-Binds">Class.Binds</a></h4>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Class-Binds"><a href="#Class-Binds">Class: Class.Binds</a></h1>
      <p class="description">Extends <a href="../../../docs/core/Class/Class.html">Class</a>; this is a mutator. It binds methods to the class instance so it is easier to pass them as callbacks whithout losing Class instance context (<code>this</code>).</p>
      <h3>Tutorial/Demo</h3>
      <ul>
        <li><a href="http://www.clientcide.com/wiki/cnet-libraries/01.1-class.extras/02-class.binds">Online Tutorial/Demo</a></li>
      </ul>
      <h3>Simple Example</h3>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>

&nbsp;
    Binds: <span class="br0">[</span><span class="st0">'show'</span><span class="br0">]</span>,
&nbsp;
    initialize: <span class="kw2">function</span><span class="br0">(</span>items<span class="br0">)</span><span class="br0">{</span>
        items.<span class="me1">each</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">start</span><span class="br0">)</span>;
    <span class="br0">}</span>,

&nbsp;
    show: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="co1">// this now always refers to the class instance</span>
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h3>Usage</h3>
      <p><em>Class.Binds</em> allows you to specify methods in your class that should be bound to the instances of the class. It saves you the trouble of typing ".bind(this)" when you pass that method as an argument (for instance, to <em>Array.each</em> or to <em>addEvent</em>). The other big benefit is that it allows you to add events to things and remove them easily. When you specify a method and use <em>.bind(this)</em> you create a copy of that function (the new copy is bound to <em>this</em> or whatever you specify). If you want to remove such an event you need to have a reference to that copy. Typically, this is accomplished like so:</p>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
&nbsp;
    initialize: <span class="kw2">function</span><span class="br0">(</span>element, message<span class="br0">)</span><span class="br0">{</span>

        <span class="kw1">this</span>.<span class="me1">el</span> = $<span class="br0">(</span>element<span class="br0">)</span>;
        <span class="kw1">this</span>.<span class="me1">message</span> = message;
        <span class="kw1">this</span>.<span class="me1">boundSay</span> = <span class="kw1">this</span>.<span class="me1">say</span>.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span>; <span class="co1">//we must store this copy</span>

    <span class="br0">}</span>,
&nbsp;
    monitor: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">el</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw1">this</span>.<span class="me1">boundSay</span><span class="br0">)</span>; <span class="co1">//then add it</span>

    <span class="br0">}</span>,
&nbsp;
    stopMonitoring: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">el</span>.<span class="me1">removeEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw1">this</span>.<span class="me1">boundSay</span><span class="br0">)</span>; <span class="co1">//so we can remove it later</span>

    <span class="br0">}</span>,
&nbsp;
    say: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">message</span><span class="br0">)</span>;
    <span class="br0">}</span>

&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <p><em>Class.Binds</em> saves you the trouble of keeping that bound reference around. See the example below.</p>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>

&nbsp;
    Binds: <span class="br0">[</span><span class="st0">'say'</span><span class="br0">]</span>,
&nbsp;
    initialize: <span class="kw2">function</span><span class="br0">(</span>element, message<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">el</span> = $<span class="br0">(</span>element<span class="br0">)</span>;
        <span class="kw1">this</span>.<span class="me1">message</span> = message;
    <span class="br0">}</span>,

&nbsp;
    monitor: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">el</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw1">this</span>.<span class="me1">say</span><span class="br0">)</span>; <span class="co1">//say is already bound to 'this'</span>

    <span class="br0">}</span>,
&nbsp;
    stopMonitoring: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">el</span>.<span class="me1">removeEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw1">this</span>.<span class="me1">say</span><span class="br0">)</span>;
    <span class="br0">}</span>,

&nbsp;
    say: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">message</span><span class="br0">)</span>;
    <span class="br0">}</span>

&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <p>By using <em>binds</em> in the example above, you don't need to bind <em>this.say</em> to <em>this</em> in the <em>addEvent</em> method in the <em>monitor</em> method; it has already been bound to <em>this</em>.</p>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
